<template>
  <div class="box">
    <my-space />
    <div class="up">
      <div class="up-left">
        <img src="/IMG/touxiang/lx.webp" alt="" />
      </div>
      <div class="up-center">
        <span class="center-up">
          刘小怂
          <em class="el-icon-message-solid"></em>
        </span>
        <span class="center-center"
          >简介:生为冰山 就该淡淡地爱海流 爱风 并且在偶然接触时
          全心全意地爱另一座冰山。</span
        >
        <ul class="center-down">
          <li><em class="el-icon-trophy"></em>6</li>
          <li><em class="el-icon-star-off"></em>66</li>
          <li><em class="el-icon-bell"></em>88</li>
        </ul>
      </div>
      <div class="up-right">
        <span>修改信息</span>
      </div>
    </div>
    <div class="down">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane class="el-item" label="我发布的句子" name="first">
          <div class="first-top" v-for="x in 15" :key="x">
            <div class="right">
              <router-link to="/wordsdetails">
                <p class="item">
                  我要这天，再遮不住我眼， 要这地，再埋不了我心，
                  要这众生，都明白我意， 要那诸佛，都烟消云散!
                </p>
              </router-link>
              <span class="item">
                ——今何在:
                <router-link to="/bookdetails">《悟空传》</router-link>
              </span>
              <div class="item bottom">
                <div class="bottom-left">
                  <h3>发布人:刘小怂</h3>
                  <em class="el-icon-message-solid"></em>
                </div>
                <span class="two">
                  <em class="el-icon-trophy">6</em>
                  <em class="el-icon-chat-dot-round">8</em>
                  <em class="el-icon-star-off">66</em>
                </span>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane class="el-item" label="我推荐的书" name="second">
          <div class="first-top" v-for="x in 15" :key="x">
            <div class="list-item">
              <router-link to="/bookdetails" class="left">
                <img src="/IMG/book/renjian.png" alt="" />
              </router-link>
              <div class="right">
                <router-link to="/bookdetails" class="bookname">
                  人间失格
                </router-link>
                <span class="writer">作者:太宰治</span>
                <span class="word"
                  >推荐语:胆小鬼连幸福都会害怕，碰到棉花都会受伤，有时还被幸福所伤。</span
                >
                <span class="user">
                  推荐人:刘小怂
                  <em class="el-icon-message-solid"></em>
                </span>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane class="el-item" label="我创建的书单" name="third">
          <div class="first-top" v-for="x in 15" :key="x">
            <div class="list-item">
              <router-link to="/booksdetails" class="left">
                <img src="/IMG/list/lg/xllg.png" alt="" />
              </router-link>
              <div class="right">
                <div class="r-top">
                  <router-link to="/booksdetails" class="bookname">
                    心理学
                  </router-link>
                </div>
                <span class="user">
                  创建人:刘小怂
                  <em class="el-icon-message-solid"></em>
                </span>
                <span class="word">
                  推荐语:恐婚?焦虑?迷茫?嫉妒?内耗?战胜恐惧的最好方法,就是面对恐惧.Follew
                  your heart!
                </span>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import MySpace from "./MySpace.vue";
export default {
  components: { MySpace },
  data() {
    return {
      activeName: "first",
    };
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  user-select: none;
}
ul,
ol {
  list-style: none;
}
*a {
  text-decoration: none;
  color: #000;
}
.box {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  > .up {
    margin: 15px 0;
  }
  .up {
    // height: 600px;
    display: flex;
    justify-content: space-around;

    .up-left {
      // width: 500px;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 150px;
        height: 150px;
        border-radius: 50%;
      }
    }
    .up-center {
      // width: 1000px;
      display: flex;
      flex-direction: column;
      margin: 15px 20px;

      .center-up {
        margin: 15px 20px;
      }
      .center-center {
        margin: 15px 20px;
      }

      .center-down {
        display: flex;
        justify-content: flex-end;
        margin: 15px 20px;
        li {
          padding-left: 25px;
          em {
            padding-right: 5px;
          }
        }
      }
    }
    .up-right {
      // width: 100px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      span {
        padding: 15px 15px;
        border-radius: 10px;
        background-color: #666;
        color: white;
        &:hover {
          background-color: #46aaff;
        }
      }
    }
  }
}
.el-item {
  .first-top {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-bottom: 1px solid black;

    .right {
      display: flex;
      flex-direction: column;

      .bottom {
        width: 100%;
        display: flex;

        justify-content: space-between;
        .bottom-left {
          display: flex;
          justify-content: center;
          align-items: center;
          em {
            padding: 10px;
          }
        }
        .two {
          margin: 15px 20px;
          em {
            padding: 10px;
          }
        }
      }

      p {
        line-height: 150%;
        text-indent: 30px;
        margin: 15px 20px;
      }

      span {
        display: flex;
        justify-content: flex-end;
        margin-right: 20px;
      }

      h3 {
        display: flex;
        justify-content: flex-end;
        margin: 15px 0 15px 20px;
      }
    }
  }

  .list-item {
    display: flex;
    justify-content: space-between;
    margin: 15px 0;

    .left {
      img {
        width: 130px;
        height: 100%;
        margin-left: 20px;
      }
    }
    .right {
      width: 100%;
      display: flex;
      flex-direction: column;
      margin: 0 15px 0 15px;

      span {
        margin: 10px 0;
        display: inline-block;
      }

      .bookname {
        display: flex;
        margin-top: 15px;
        justify-content: flex-start;
        font-size: 1.8rem;
        font-weight: 400;
      }
      .writer {
        display: flex;
        justify-content: flex-end;
      }
      .user {
        display: flex;
        justify-content: flex-end;

        font-size: 1.2rem;
      }
      .word {
        margin-top: 10px;
        font-size: 1rem;
      }
    }
  }
}
</style>